<template>
  <div class="app-container">

  <el-card class="box-card">

  <el-tabs >

      <el-button  style="border: none;" @click="kaipai" >
        <div >
          <img  src="~@/assets/icons/image/1.png"  >
      <div >开牌</div>

        </div>
      </el-button>
      <el-button    style="border: none;" @click="diandan">
        <div >
          <img src="~@/assets/icons/image/2.png"  >
          <div >点单</div>
        </div>
      </el-button>
      <el-button  style="border: none;" @click="duidan">
        <div >
          <img src="~@/assets/icons/image/3.png" >
          <div >对单</div>
        </div>
      </el-button>
      <el-button  style="border: none;"  @click="maidan">
        <div >
          <img src="~@/assets/icons/image/4.png">
          <div >买单</div>
        </div>
      </el-button>
      <el-button  style="border: none;"  @click="fendan">
        <div >
          <img src="~@/assets/icons/image/5.png">
          <div >分单</div>
        </div>
      </el-button>
      <el-button  style="border: none;"  @click="qubingpai">
        <div >
          <img src="~@/assets/icons/image/6.png">
          <div >取并</div>
        </div>
      </el-button>
      <el-button  style="border: none;"  @click="tuidan">
        <div >
          <img src="~@/assets/icons/image/7.png">
          <div >退单</div>
        </div>
      </el-button>
      <el-button  style="border: none;"  @click="huanpai">
        <div >
          <img src="~@/assets/icons/image/8.png">
          <div >换牌</div>
        </div>
      </el-button>
      <el-button  style="border: none;"  @click="bingpai">
        <div >
          <img src="~@/assets/icons/image/9.png">
          <div >并牌</div>
        </div>
      </el-button>
      <el-button  style="border: none;"  @click="liupai">
        <div >
          <img src="~@/assets/icons/image/10.png">
          <div >留牌</div>
        </div>
      </el-button>
    <el-button  style="border: none;"  @click="quliu">
      <div >
        <img src="~@/assets/icons/image/14.png">
        <div >取留</div>
      </div>
    </el-button>
      <el-button  style="border: none;"  @click="suopai">
        <div >
          <img src="~@/assets/icons/image/11.png">
          <div >锁牌</div>
        </div>
      </el-button>
      <el-button  style="border: none;" @click="xiugai">
        <div >
          <img src="~@/assets/icons/image/12.png">
          <div >修改</div>
        </div>
      </el-button>
    <el-button  style="border: none;" @click="xiaoxi">
      <div >
        <img src="~@/assets/icons/image/17.png">
        <div >消息</div>
      </div>
    </el-button>
     <!-- <el-button  style="border: none;" >
        <div >
          <img src="~@/assets/icons/image/13.png">
          <div >团体</div>
        </div>
      </el-button>-->
     <!-- <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/14.png">
          <div >统计</div>
        </div>
      </el-button>-->
      <el-button  style="border: none;" @click="liulan">
        <div >
          <img src="~@/assets/icons/image/15.png">
          <div >浏览</div>
        </div>
      </el-button>
      <el-button  style="border: none;" @click="jiaoban">
        <div >
          <img src="~@/assets/icons/image/16.png">
          <div >交班</div>
        </div>
      </el-button>
      <!--<el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/17.png">
          <div >11挂失</div>
        </div>
      </el-button>-->






    <!--模态框-->
<!--交班-->
    <el-dialog :title="jiaobantitle" :visible.sync="jiaobandialogVisible" :close-on-click-modal="false" :showClose="false" width="30%" @close="getList">
      <jiaoban  @closeDialog="jiaobandialogVisible=false" />
    </el-dialog>
    <!--开牌-->
    <el-dialog :title="kaipaititle" :visible.sync="kaipaidialogVisible" :close-on-click-modal="false" :showClose="false" @close="getList">
      <kaipai :mastercard="mastercard"  @closeDialog="kaipaidialogVisible=false" />
    </el-dialog>
    <!--并牌-->
    <el-dialog :title="bingpaititle" :visible.sync="bingpaidialogVisible" :close-on-click-modal="false" :showClose="false" width="30%" @close="getList">
      <bingpai  @closeDialog="bingpaidialogVisible=false" />
    </el-dialog>
    <!--取消并牌-->
    <el-dialog :title="qubingpaititle" :visible.sync="qubingpaidialogVisible" :close-on-click-modal="false" :showClose="false"  @close="getList">
      <qubingpai  @closeDialog="qubingpaidialogVisible=false" />
    </el-dialog>
    <!--换牌-->
    <el-dialog  :title="huanpaititle" :visible.sync="huanpaidialogVisible" :close-on-click-modal="false" :showClose="false" width="30%" @close="getList">
      <huanpai :huanpaihandid="huanpaihandid" @closeDialog="huanpaidialogVisible=false"  />
    </el-dialog>
    <!--锁牌-->
    <el-dialog :title="suopaititle" :visible.sync="suopaidialogVisible" :close-on-click-modal="false" :showClose="false" width="30%" @close="getList">
      <suopai :suppaihandid="suppaihandid" @closeDialog="suopaidialogVisible=false" />
    </el-dialog>
    <!--留牌-->
    <el-dialog :title="liupaititle" :visible.sync="liupaidialogVisible" :close-on-click-modal="false" :showClose="false" width="30%" @close="getList">
      <liupai  @closeDialog="liupaidialogVisible=false" />
    </el-dialog>
    <!--取消留牌-->
    <el-dialog :title="quliupaititle" :visible.sync="quliupaidialogVisible" :close-on-click-modal="false" :showClose="false" @close="getList">
      <quliupai  @closeDialog="quliupaidialogVisible=false" />
    </el-dialog>
    <!--修改-->
    <el-dialog :title="xiugaititle" :visible.sync="xiugaidialogVisible" :close-on-click-modal="false" @close="getList">
      <xiugai :xiugaihandid="xiugaihandid" @closeDialog="xiugaidialogVisible=false" />
    </el-dialog>
    <!--分单-->
    <el-dialog :title="fendantitle" :visible.sync="fendandialogVisible" :close-on-click-modal="false" :showClose="false" width="80%" @close="getList" >
    <fendan @closeDialog="fendandialogVisible=false" />
  </el-dialog>
    <!--退单-->
    <el-dialog :title="tuidantitle" :visible.sync="tuidandialogVisible" :close-on-click-modal="false" @close="getList">
      <tuidan :tuidanhandid="tuidanhandid" @closeDialog="tuidandialogVisible=false" />
    </el-dialog>
    <!--浏览-->
    <el-dialog :title="liulantitle" :visible.sync="liulandialogVisible" :close-on-click-modal="false" :showClose="false" @close="getList">
      <liulan  @closeDialog="liulandialogVisible=false" />
    </el-dialog>
    <!--浏览-->
    <el-dialog :title="xiaoxititle" :visible.sync="xiaoxidialogVisible" :close-on-click-modal="false" :showClose="false" @close="getList">
      <Xiaoxi  @closeDialog="xiaoxidialogVisible=false" />
    </el-dialog>


















    <!--模态框结束-->












  <!--  <el-tab-pane label="前台收银">配置管理</el-tab-pane>
    <el-tab-pane label="操作">角色管理</el-tab-pane>
    <el-tab-pane label="窗口">定时任务补偿</el-tab-pane>
    <el-tab-pane label="帮助">定时任务补偿</el-tab-pane>-->
  </el-tabs>
<!--  </el-card>-->
    <el-divider></el-divider>







   <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="手牌号" prop="handBrand">
          <el-input
            v-model="queryParams.handBrand"
            placeholder="请输入手牌号
              clearable
          @keyup.enter.native="handleQuery"
          />
        </el-form-item>
    </el-form>-->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px" @submit.native.prevent>
      <div style="text-align: right;">
        <el-form-item style="text-align: right;">
        <el-input
          v-model="queryParams.handBrand"
          placeholder="请输入手牌号"
          clearable
          style="width: 80%;"
          @keyup.enter.native="handleQuery"
        />
        </el-form-item>

      <el-form-item style="text-align: right;">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">刷新</el-button>
        <el-button type="primary" plain size="mini" @click="yijie">结账记录</el-button>
      </el-form-item>
      </div>
    </el-form>


    <br>
    <el-table v-loading="loading" :data="billsList" border @selection-change="handleSelectionChange">
      <el-table-column type="selection"  width="55" align="center" />
      <el-table-column type="index" label="序号"  width="55" :index="indexMethod" align="center"/>
      <el-table-column label="手牌号" align="center" prop="handBrand" />
      <el-table-column label="留牌状态" align="center" prop="retentionStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.yqg_retention_status" :value="scope.row.retentionStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="并牌状态" align="center" prop="mergeStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.yqg_merge_status" :value="scope.row.mergeStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="手牌状态" align="center" prop="handState">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.yqg_hand_state" :value="scope.row.handState"/>
        </template>
      </el-table-column>


      <el-table-column label="开牌时间" align="center" prop="openingTime" />
      <el-table-column label="团体号" align="center" prop="groupId" />
      <el-table-column label="单号" align="center" prop="oddNumbers" />
      <el-table-column label="人数" align="center" prop="numberOfPeople" />

     <!-- <el-table-column label="总消费金额" align="center" prop="totalConsumptionAmount" />-->
      <el-table-column label="总费用" align="center" prop="allCost" />
      <el-table-column label="操作员" align="center" prop="operator" />
      <el-table-column label="备注" align="center" prop="note" />
      <el-table-column label="团体备注" align="center" prop="groupNotes" />

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </el-card>
    </div>
</template>
<script>



import  jiaoban from "../lys/jiaoban/index";//引入
import  kaipai from "../whd/kaipai/add";//引入
import  Xiaoxi from "../whd/msg/index";//引入
import  bingpai from "../ljw/bingpai/index";//引入
import  qubingpai from "../ljw/qubingpai/index";//引入
import  huanpai from "../wyw/huanpai/index";//引入
import  suopai from "../wyw/suopai/index";//引入
import  liupai from "../cjl/liupai/index";//引入
import  quliupai from "../cjl/quliupai/index";//引入

import  xiugai from "../lys/xiugai/index";//引入
import  fendan from "../gs/fendan/index";//引入
import  tuidan from "../lys/tuidan/index";//引入
import  liulan from "../lyx/xieba/chaxun";//引入
import { listBills, getBills, delBills, addBills, updateBills } from "@/api/module/whd/heji";
import axios from 'axios';
import {infolist} from "@/api/module/whd/diandan";

export default {

  name: "Baseinfo",
  dicts: ['yqg_hand_state','yqg_locked_state','yqg_merge_status','yqg_retention_status'],
  components: { jiaoban,kaipai,bingpai,qubingpai,huanpai,suopai,liupai,tuidan,xiugai,fendan,liulan,Xiaoxi,quliupai
  },
  data() {
    return {
      jiaobandialogVisible: false,
      kaipaidialogVisible: false,
      bingpaidialogVisible: false,
      qubingpaidialogVisible: false,
      huanpaidialogVisible: false,
      suopaidialogVisible: false,
      liupaidialogVisible: false,
      quliupaidialogVisible:false,
      xiugaidialogVisible: false,
      fendandialogVisible:false,
      tuidandialogVisible:false,
      liulandialogVisible:false,












      suopaititle:"锁/解牌",
      kaipaititle:"开牌",
      jiaobantitle:"交班",
      bingpaititle:"并牌",
      qubingpaititle:"取消并牌",
      huanpaititle:"换牌",
      liupaititle:"留牌",
      quliupaititle:"取留",
      xiugaititle:"修改",
      fendantitle:"分单",
      tuidantitle:"退单",
      liulantitle:"浏览",
      xiaoxititle:"消息",




      fendanhandid: null,

      tuidanhandid:null,
      xiugaihandid:null,
      suppaihandid:null,
      mastercard:null,
      huanpaihandid:null,
      xiaoxidialogVisible:null,



      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      chuanhandBrand: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 吧台账单表格数据
      billsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        nickName: null,
        department: null,
        userName: null,
        post: null,
        handBrand: null,
        originalHand: null,
        handCategory: null,
        retentionStatus: null,
        mergeStatus: null,
        handState: 1,
        numberOfPeople: null,
        allCost: null,
        openingTime: null,
        groupId: null,
        oddNumbers: null,
        children: null,
        mastercard: null,
        handoverTime: null,
        handoverStatus: null,
        barNumber: null,
        sailings: null,
        together: null,
        note: null,
        groupNotes: null,
        discountAmount: null,
        checkoutTime: null,
        supplementaryConsumption: null,
        paidInAmount: null,
        paidInCash: null,
        changeAmount: null,
        paymentMethod: null,
        totalConsumptionAmount: null,
        cardiner: null,
        checkout: null,
        frontSign: null,
        frontPrintTime: null,
        operator: null,
        checkoutLocation: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    }
  },
created() {
  this.getList();
    },
  mounted() {
    // setInterval(this.getList1, 1000);
  },

  methods: {
    // fetchData() {
    //   axios.get()
    //     .then(response => {
    //       this.billsList = response.data;
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // },
    // 表单重置
    reset() {
      this.form = {
        ID: null,
        userId: null,
        deptId: null,
        nickName: null,
        department: null,
        userName: null,
        post: null,
        handBrand: null,
        originalHand: null,
        handCategory: null,
        retentionStatus: null,
        mergeStatus: null,
        handState: null,
        numberOfPeople: null,
        allCost: null,
        openingTime: null,
        groupId: null,
        oddNumbers: null,
        children: null,
        mastercard: null,
        handoverTime: null,
        handoverStatus: null,
        barNumber: null,
        sailings: null,
        together: null,
        note: null,
        groupNotes: null,
        discountAmount: null,
        checkoutTime: null,
        supplementaryConsumption: null,
        paidInAmount: null,
        paidInCash: null,
        changeAmount: null,
        paymentMethod: null,
        totalConsumptionAmount: null,
        cardiner: null,
        checkout: null,
        frontSign: null,
        frontPrintTime: null,
        operator: null,
        checkoutLocation: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("form");
    },
    resetQuery(){
      this.queryParams.handBrand=null;
      this.handleQuery();

    },
    //查看结账记录
    yijie(){
      this.$router.push({path: "/batai/duizhang"});
    },
    toggleSelection() {
      /*this.$refs.multipleTable.clearSelection(row);
      this.$refs.multipleTable.toggleRowSelection(row);*/
console.log(11111111)
      /*if (rows) {
        rows.forEach(row => {

        });
      } else {

      }*/
    },
    // 多选框选中数据
    handleSelectionChange(selection) {

      if (selection.length > 0) {
        const selectedRow = selection[0];
        this.ids = [selectedRow.id];
        this.chuanhandBrand = [selectedRow.handBrand];
        this.single = false;
        this.multiple = false;
      } else {
        this.ids = [];
        this.chuanhandBrand = [];
        this.single = true;
        this.multiple = true;
      }
      /*this.ids = selection.map(item => item.id)
      this.chuanhandBrand= selection.map(item => item.handBrand)
      this.single = selection.length!==1
      this.multiple = !selection.length*/
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    indexMethod(index) {
      index = (index + 1) + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
      return index
    },

    /** 查询吧台账单列表 */
    getList() {
      this.loading = true;
      listBills(this.queryParams).then(response => {
        this.billsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getList1() {

      listBills(this.queryParams).then(response => {
        this.billsList = response.rows;
        this.total = response.total;

      });
    },






    //交班
      jiaoban() {
        this.jiaobandialogVisible = true;
      },
  //开牌
      kaipai(row) {
        const mastercard = row.chuanhandBrand||this.chuanhandBrand;
        this.mastercard=mastercard;
        this.kaipaidialogVisible = true;
      },
  //并牌
      bingpai() {
        this.bingpaidialogVisible = true;
      },
 //取消并牌
      qubingpai() {
        this.qubingpaidialogVisible = true;
      },
  //换牌
    huanpai(row) {
      const handBrand = row.chuanhandBrand||this.chuanhandBrand;
      this.huanpaihandid=handBrand;
        this.huanpaidialogVisible = true;
      },
  //锁牌
      suopai(row) {
        const handBrand = row.chuanhandBrand||this.chuanhandBrand;
        this.suppaihandid=handBrand;
        this.suopaidialogVisible = true;
      },
  //留牌
      liupai() {
        this.liupaidialogVisible = true;
      },
    //取留牌
    quliu() {
      this.quliupaidialogVisible = true;
    },
  //修改
      xiugai(row) {
        const handBrand = row.chuanhandBrand||this.chuanhandBrand;
        this.xiugaihandid=handBrand;
        this.xiugaidialogVisible = true;
      },
    //分单
    fendan() {

     // const handBrand = row.chuanhandBrand||this.chuanhandBrand;
      //this.fendanhandid=handBrand;
      this.fendandialogVisible = true;
    },
    //退单
    tuidan(row) {
      const handBrand = row.chuanhandBrand||this.chuanhandBrand;
      this.tuidanhandid=handBrand;
      this.tuidandialogVisible = true;
    },
    //浏览
    liulan() {
      this.liulandialogVisible = true;
    },
    //消息
    xiaoxi() {

      this.xiaoxidialogVisible = true;
    },
    maidan(row){
      const handBrand = row.chuanhandBrand||this.chuanhandBrand;

      this.$router.push({path: '/batai/jiezhang', query: {handBrand}});
      //this.$router.push({path: "/batai/jiezhang", query: {handid}});
    },
    duidan(row){
      const handBrand = row.chuanhandBrand||this.chuanhandBrand;
      this.$router.push({path: "/batai/duidan",query: {handBrand}});
    },
    diandan(row){
      const handBrand = row.chuanhandBrand||this.chuanhandBrand;
      this.$router.push({path: "/batai/diandan",query: {handBrand}});
    },




  },





}

</script>



<style lang="scss" scoped>

img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}


</style>

